<template>
  <div class="login">
    <el-card class="box-card clear" shadow="always">
      <h1>登录</h1>
      <div class="left"></div>
      <div class="account">
        <account-login
          :ruleForm="ruleForm"
          :rules="rules"
          @submit="submit"
          @errHandle="errHandle"
        >
        </account-login>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import AccountLogin from "../components/ComLogin";
export default {
  name: "Login",
  components: { AccountLogin },
  props: {},
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        resource: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 6,
            message: "用户名在2-6个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码在6-15个字符之间",
            trigger: "blur",
          },
        ],
        resource: [
          { required: true, message: "请选择登录人员类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submit() {
      axios
        .post(`http://localhost:3000/login`, {
          u_username: this.ruleForm.username,
          u_password: this.ruleForm.password,
          u_type: this.ruleForm.resource,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            localStorage.setItem("token", JSON.stringify(ret.data.key));
            this.$message.success("登录成功");
            setTimeout(() => {
              switch (ret.data.userData.u_type) {
                case 1:
                  this.$router.push("/");
                  break;
                case 2:
                  this.$router.push("/teacher");
                  break;
                case 3:
                  this.$router.push("/Expert");
                  break;
                case 4:
                  this.$router.push("/Administrator");
                  break;
                default:
                  break;
              }
            }, 1000);
          } else {
            this.$message.error("账号与密码不匹配，请重新输入！");
          }
        });
    },
    errHandle() {
      console.log(this.ruleForm);
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/img/login_bg.jpg") no-repeat;
  background-size: 120% 100%;
  background-attachment: fixed;
}
.login h1 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
}
.box-card {
  width: 700px;
  margin: 0 auto;
  top: 20%;
  padding: 20px;
  /* 毛玻璃 */
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 10px 10px 20px black;
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* border-left: 1px solid rgba(255, 255, 255, .5); */
  /* border-top: 1px solid rgba(255, 255, 255, .5); */
  border-radius: 10%;
  position: relative;
  box-sizing: border-box;
}
.account {
  width: 40%;
  float: left;
  margin: 40px 0 0 40px;
}
.left {
  width: 50%;
  height: 280px;
  float: left;
  border-radius: 20%;
  background: url("../assets/img/UI_bg1.jpeg") no-repeat -400px -510px;
  background-size: 240% 500%;
}
</style>
